<extend name="Public/layout" />
<block name="body">
    <link rel="stylesheet" href="/Public/Wap/css/e.css">
    <link rel="stylesheet" href="/Public/Wap/css/ec.css">
    <script src="/Public/Wap/js/vue.js"></script>
    <script src="/Public/Wap/js/e.js"></script>
    <link rel="stylesheet" href="/Public/Wap/css/dy/addres.css">
    <div id="vmRoot" class="vm-container">
        <div class="card-box">
            <div class="ui-flex">
                <h5 class="ui-flex-lt filter-label">请选择资源类型</h5>
                <div class="item-list">
                    <el-button v-for="(n, i) in list" :key="i" :type="i + 1 == postData.type ? 'primary' : ''"
                        @click="postData.type = i+1" plain class="item">{{ n }} </el-button>
                </div>
            </div>
            <div class="main-line" style="margin-top: 10px;"></div>
            <div class="ui-flex">
                <h5 class="ui-flex-lt filter-label">请检验资源</h5>
                <div>
                    <el-input v-model="postData.zhubo_nickname" placeholder="请输入资源名称" type="textarea"></el-input>
                    <el-button @click="checkRes" type="primary" style="margin-top: 15px;">检测资源</el-button>
                </div>
            </div>
        </div>
        <div v-if="!hasRes" class="card-box">
            <el-form ref="form" label-width="140px" style="max-width: 800px;">
                <el-form-item label="账号">
                    <el-input v-model="postData.no"></el-input>
                </el-form-item>
                <el-form-item label="主播图片">
                    <!-- <el-input v-model="postData.avatar"></el-input> -->
                    <el-upload class="avatar-uploader" action="" accept="image/*" :show-file-list="false"
                        :before-upload="uploadFile">
                        <img v-if="postData.avatar" :src="postData.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="主播等级">
                    <el-radio-group v-model="postData.level">
                        <el-radio v-for="(n, i) in levels" :key="i" :label="n.idx">{{ n.title }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="垂直领域">
                    <el-checkbox-group v-model="postData.vertical_type">
                        <el-checkbox v-for="(n, i) in restypes" :key="i" :label="n.idx">{{ n.title }}</el-radio>
                            </el-radio-group>
                </el-form-item>
                <el-form-item label="服务领域">
                    <el-input v-model="postData.service_hang"></el-input>
                </el-form-item>
                <el-form-item label="粉丝数量">
                    <el-input v-model="postData.fans_num"></el-input>
                </el-form-item>
                <el-form-item label="报价">
                    <el-input v-model="postData.price"></el-input>
                </el-form-item>
                <el-form-item label="排期">
                    <el-input v-model="postData.schedule"></el-input>
                </el-form-item>
                <el-form-item label="达人所属机构">
                    <el-input v-model="postData.organization"></el-input>
                </el-form-item>
                <el-form-item label="机构LOGO">
                    <!-- <el-input v-model="postData.organization_avatar"></el-input> -->
                    <el-upload class="avatar-uploader" action="" accept="image/*" :show-file-list="false"
                        :before-upload="uploadFile1">
                        <img v-if="postData.organization_avatar" :src="postData.organization_avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="合作方式">
                    <el-input v-model="postData.work_type"></el-input>
                </el-form-item>
                <el-form-item label="合作次数">
                    <el-input v-model="postData.work_num"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="postData.contact"></el-input>
                </el-form-item>
                <el-form-item label="收件人">
                    <el-input v-model="postData.addressee"></el-input>
                </el-form-item>
                <el-form-item label="收件地址">
                    <el-input v-model="postData.address"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="edit" type="primary" @click="editSubmit">确认修改</el-button>
                    <el-button v-else type="primary" @click="submit">立即创建</el-button>
                    <!-- <el-button>取消</el-button> -->
                </el-form-item>
            </el-form>
        </div>
    </div>
    <script>
        let fData = '颜值达人,剧情搞笑,美妆,时尚,萌宠,音乐,舞蹈,美食,游戏,旅行,汽车,生活,测评,二次元,母婴,亲子,科技数码,教育培训,运动健身,家居家装,才艺技能,影视娱乐,艺术文化,财经投资,情感,三农,园艺,美搭,综合'
        new Vue({
            el: '#vmRoot',
            data: function () {
                return {
                    edit: '<?php echo $_REQUEST["edit"] ?>' || '',
                    id: '<?php echo $_REQUEST["id"] ?>' || '',
                    list: '抖音,快手,淘宝直播,京东资源,火山视频,西瓜视频,导购APP,社群渠道'.split(','),
                    restypes: fData.split(',').map((n, i) => { return { title: n, idx: String(i + 1) } }),
                    levels: [{ title: '低', idx: 1 }, { title: '中', idx: 2 }, { title: '高', idx: 3 }],
                    hasRes: true,
                    postData: {
                        type: 1,
                        level: '',
                        zhubo_nickname: '',
                        no: '',
                        avatar: '',
                        price: '',
                        service_hang: '',
                        fans_num: '',
                        organization: '',
                        contact: '',
                        address: '',
                        addressee: '',
                        organization_avatar: '',
                        work_type: '',
                        work_num: '',
                        vertical_type: [],
                        schedule: '',
                    },
                }
            },
            methods: {
                getDetail() {
                    let that = this;
                    $.post('{:U("/kcadmin/Dy/sourceDetail")}', { source_id: that.id }, function (res) {
                        if (res.code == 200) {
                            // that.$message({
                            //     message: '获取成功',
                            //     type: 'success'
                            // });
                            let data = res.data;
                            data.vertical_type = data.vertical_type.split(',')
                            for (i in res.data) {
                                that.postData[i] = res.data[i]
                            }
                            that.hasRes = false;
                        }
                    })
                },
                checkRes() {
                    let that = this;
                    $.post('{:U("/kcadmin/Dy/sourceCheck")}', { type: that.postData.type, zhubo_nickname: that.postData.zhubo_nickname }, function (res) {
                        if (res.code == 1) {
                            that.hasRes = false;
                        }
                    })
                },
                submit() {
                    let that = this;
                    let postData = JSON.parse(JSON.stringify(that.postData));
                    postData.vertical_type = postData.vertical_type.join(',')
                    $.post('{:U("/kcadmin/Dy/sourceAdd")}', postData, function (res) {
                        console.log(res)
                        if (res.code == 200) {
                            that.$message({
                                message: '发布成功',
                                type: 'success'
                            });
                            setTimeout(function () {
                                location.href = '{:U("/kcadmin/dy/kslist") }?type=' + that.postData.type
                            }, 700)
                        } else {
                            that.$message.error(res.msg);
                        }
                    })
                },
                editSubmit() {
                    let that = this;
                    let postData = that.postData;
                    postData.source_id = that.id;
                    $.post('{:U("/kcadmin/Dy/sourceSave")}', postData, function (res) {
                        console.log(res)
                        if (res.code == 200) {
                            that.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            setTimeout(function () {
                                location.href = '{:U("/kcadmin/dy/kslist") }?type=' + that.postData.type
                            }, 700)
                        } else {
                            that.$message.error(res.msg);
                        }
                    })
                },
                uploadFile(file) {
                    let that = this;
                    // let file = e.target.files[0];
                    console.log(file);
                    // return false;
                    // this.imageUrl = URL.createObjectURL(file.raw)

                    let data = new FormData();
                    data.append('kcs_uploader_file', file);

                    let xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            console.log(xhr.responseText);
                            console.log('####');

                            var data = JSON.parse(xhr.responseText).data;
                            var ecode = JSON.parse(xhr.responseText).error_code;

                            // console.log(data)
                            if (ecode == 0) {
                                console.log(data.avatar_url)
                                that.postData.avatar = data.avatar_url
                            }
                        }
                    };
                    xhr.open('POST', ("http://" + location.hostname) + '/api/Upload');
                    xhr.send(data)

                    return false;
                },
                uploadFile1(file) {
                    let that = this;
                    // let file = e.target.files[0];
                    console.log(file);
                    // return false;
                    // this.imageUrl = URL.createObjectURL(file.raw)

                    let data = new FormData();
                    data.append('kcs_uploader_file', file);

                    let xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            console.log(xhr.responseText);
                            console.log('####');

                            var data = JSON.parse(xhr.responseText).data;
                            var ecode = JSON.parse(xhr.responseText).error_code;

                            // console.log(data)
                            if (ecode == 0) {
                                console.log(data.avatar_url)
                                that.postData.organization_avatar = data.avatar_url
                            }
                        }
                    };
                    xhr.open('POST', ("http://" + location.hostname) + '/api/Upload');
                    xhr.send(data)

                    return false;
                },
            },
            mounted() {
                let that = this;
                // this.checkRes()
                if (this.edit && this.id) {
                    this.getDetail()
                }
            }
        })
    </script>
</block>